<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
    <meta name="wap-font-scale" content="no">
    <meta name="screen-orientation" content="portrait">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="format-detection" content="telephone=no,email=no,address=no,date=no" />
    <link rel="stylesheet" href="../../common/css/reset.css">
    <link rel="stylesheet" href="../../common/css/public.css">
</head>
<body>
    <div class="eq_resize over_hide"  id="login_page">
        <!-- 登录页面 -->
         <section id="about_label">
            <p class="txt_block logo"></p>
         </section>
         <!-- 表单 -->
         <section id="loginMode">
             <form action="">
                 <dl class="clearfix">
                     <dt class="fl user"></dt>
                     <dd class="fl">
                         <input type="text" 
                                placeholder="输入手机号"  
                                id="mobile"
                                class="inputForm" 
                                name=""
                                data-empty="请输入手机号码"
                                data-error="手机号格式错误"
                                data-reg="^1(3|4|5|7|8)\d{9}$"
                                data-correct="输入手机号"
                                maxlength="11" 
                         >
                         <a href="javascript:;" class="txt_cancel pCenter"></a>
                     </dd>
                 </dl>
                 <dl class="clearfix">
                     <dt class="fl  password"></dt>
                     <dd class="fl">
                         <input type="password" 
                                placeholder="输入密码" 
                                id="password"
                                class="inputForm"  
                                name=""
                                data-empty="请输入密码登录"
                                data-error="密码格式错误"
                                data-correct="输入密码"
                                data-reg="^[A-Za-z0-9]{8,16}$"
                                maxlength="16" 
                         >
                         <a href="javascript:;" class="txt_cancel pCenter"></a>
                     </dd>
                 </dl>
                 <button  type="button"  class="login_btn"  id="login_btn" disabled="true">登陆</button>
             </form>
             <p class="flex">
                <a href="javascript:;" class="tour_customer">游客登录</a>
                <a href="javascript:;" class="forget_pass">忘记密码？</a>
             </p>
             <p class="none_account  txt_center">还没有账号？<a href="javascript:;">立即注册</a></p>
         </section>
    </div>
    <section class="model  hide">
        <div class="Info_mode pCenter txt_center">
            <h4>账号或密码错误</h4>
            <p>确定</p>
        </div>
    </section>
</body>
</html>
<script src="../../common/script/phoneSize.js"></script>
<script src="../../common/script/jquery-1.11.2.js"></script>
<script src="../../common/script/public.js"></script>
<script>
   (function(){
        function LoginMode(){};
        LoginMode.prototype={
            //初始化函数
            init:function(opts){
                this.opts={};
                this.opts={
                    events:opts.events,//触发事件
                    cancelBtn:opts.cancelBtn,//删除文本按钮
                    text:opts.inputForm.text,//输入的文本框
                    password:opts.inputForm.password, //输入的密码框
                    subBtn:opts.inputForm.subBtn,//登录按钮
                    textPut:opts.inputForm.textPut//所有文本框
                }
                this.clearInput(this.opts.cancelBtn);//清空文本框函数调用
                 //登录判断
                this.subBtn(
                            this.opts.subBtn,
                            this.opts.textPut,
                            this.opts.text,
                            this.opts.password
                );
                this.textChange(this.opts.textPut);//表单元素焦点触发

                //公共方法调用   取消焦点触发--------------------------------
                oPublic.focusCancel(this.opts.textPut);


            },
            //清空文本框功能
            clearInput:function(opt){
                //点击事件,清空文本框
                $(opt).on(this.opts.events,function(){
                    $(this).prev().val("");
                })
            },
            //登录按钮
            subBtn:function(loginBtn,inputForm,mobileText,passText){
                //启用登录按钮
                    //当密码和手机号码不能空时则启用----------
                $(inputForm).keyup(function(){
                    var telephone=$(mobileText).val();
                    var password=$(passText).val();
                    if(telephone.length>=11&&password.length>=8&&password.length<=16){
                        $(loginBtn).attr("disabled",false).addClass("active");
                    }else{
                        $(loginBtn).attr("disabled",true).removeClass("active");
                    }
                });


                $(loginBtn).on(this.opts.events,function(){
                    $(inputForm).each(function(){
                        var Value=$(this).val();
                        var regError=$(this).attr("data-error");//错误信息
                        var regStr=$(this).attr("data-reg");//正则
                        var reg=new RegExp(regStr);
                        //正则判断手机号码的格式是否正确 
                        if(reg&&!reg.test(Value)){
                            oPublic.errorText($(this),regError,"warn","dl");
                            return;
                        }
                    });
                });

            },
            textChange:function(opts){
                //点击事件
                $(opts).on(this.opts.events,function(ev){
                    //阻止默认事件冒泡
                    ev.preventDefault();
                    ev.stopPropagation()
                    $(this).parents("dl").addClass("active").siblings().removeClass("active");
                });

                //焦点失去下边框消失
                $(document).on(this.opts.events,function(){
                    $(opts).parents("dl").removeClass("active");
                })

            }
        };
        window.loginMode=new LoginMode();
    })();


    //初始化函数调用
    loginMode.init({
        events:"click",//触发事件名称
        cancelBtn:".txt_cancel",//删除按钮
        inputForm:{
            text:"#mobile",
            password:"#password",
            subBtn:"#login_btn",
            textPut:".inputForm"
        }
    })


</script>
